<template>
  <div class="wrapper">
    <div class="common-tab-box">
      <div
        :class="{ active: tabI === index }"
        v-for="(item, index) in tab"
        :key="index"
        @click="changeTab(index)"
      >
        {{ item.label }}
      </div>
    </div>
    <TransportCapacityTrendChart :label="tab[tabI].label" />
  </div>
</template>

<script>
import TransportCapacityTrendChart from './TransportCapacityTrendChart.vue'

export default {
  name: 'TransportCapacityTrend',
  components: {
    TransportCapacityTrendChart
  },
  data() {
    return {
      tab: [{ label: '客运量' }, { label: '货运量' }],
      tabI: 0
    }
  },
  methods: {
    changeTab(tabI) {
      if (tabI === this.tabI) return false
      this.tabI = tabI
      // this.$emit('change-title', this.tab[tabI].label)
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;

  .common-tab-box {
    margin-bottom: 0;
  }
}
</style>
